<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{path:'/store'}">帮买取快递废品回收</el-breadcrumb-item>
			<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row style="margin-top: 10px;">
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="驿站名称">
					<el-input v-model="queryInfo.courierStationName" placeholder="输入驿站名称"></el-input>
				</el-form-item>
				<el-form-item label="小区名称">
					<el-input v-model="queryInfo.communityName" placeholder="输入小区名称"></el-input>
				</el-form-item>
				<el-form-item label="添加日期">
					<el-date-picker value-format='yyyy-MM-dd hh:mm:ss' v-model="date" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button @click="onSubmit" type="primary">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<el-row>
			<el-button type="primary" @click="addpost">添加驿站</el-button>
		</el-row>
		<el-dialog :title="title" :visible.sync="dialogFormVisible">
			<el-form :model="PostData">
				<el-form-item label="驿站名称" label-width="80px">
					<el-input v-model="PostData.courierStationName" autocomplete="off" placeholder="请输入驿站名称"></el-input>
				</el-form-item>
				<el-form-item label="所属地区" label-width="80px">
					<el-cascader placeholder="请选择省市区" v-model="address" :options="citys"></el-cascader>
				</el-form-item>

				<el-form-item label="所属小区" :label-width="120 + 'px'">
					<!-- <el-input placeholder="请输入驿站详细地址" v-model="PostData.courierStationAddress"autocomplete="off"></el-input> -->
					<el-select @change="changeCommunity" v-model="value" placeholder="请选择">
						<el-option v-for="item in communityList" :key="item.communityId" :label="item.communityName"
							:value="item.communityId">
						</el-option>
					</el-select>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancle()">取 消</el-button>
				<el-button type="primary" @click="confirm()">确 定</el-button>
			</div>
		</el-dialog>

		<el-table :data="postList" :header-cell-style="{backgroundColor:'#eee'}" border>
			<el-table-column prop="courierStationId" label="ID"></el-table-column>
			<el-table-column prop="courierStationName" label="驿站名字"></el-table-column>
			<el-table-column prop="courierStationImage" label="驿站照片"></el-table-column>
			<el-table-column prop="courierStationAddress" label="驿站地址"></el-table-column>
			<el-table-column prop="courierStationCommunityName" label="所在小区"></el-table-column>
			<el-table-column prop="addTime" label="添加时间"></el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.courierStationStatus==1" type="success">已上架</el-tag>
					<el-tag v-else type="danger">已下架</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link v-if="scope.row.courierStationStatus==1" type="primary" :underline="false"
						@click="con(scope.row)">立即下架</el-link>
					<el-link v-else type="primary" :underline="false" @click="con(scope.row)">立即上架</el-link>
					<el-link type="primary" :underline="false" @click="editPost(scope.row)">编辑</el-link>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" @next-click='next'
			@prev-click="prev" :current-page="queryInfo.pageNum" :page-sizes="[5,10, 20, 30, 40]" :page-size="100"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				queryInfo: {
					courierStationStatus: '',
					courierStationName: '',
					communityName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5
				},
				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				value: '',
				formLabelWidth: '120px',
				date: '',
				total: 1,
				postList: [],
				communityList: [],
				title: '添加驿站',
				dialogFormVisible: false,
				PostData: {
					addOrUpdateFlag: 1,
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: "",
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: ""
				},
				mounted() {
					this.querypostList()
				},
				address: [],
				citys: citys,
			}
		},

		methods: {
			queryCommunityList() {
				this.$http.get('community/communityList', {
						params: {
							pageNum: 1,
							pageSize: 99999
						}
					})
					.then(res => {
						if (res.data.status == 200) {
							this.communityList = res.data.data.list;
							// this.total = res.data.data.total;
						} else {
							this.$message.error('服务器接口异常')
						}
					})
					.catch(err => {
						this.$message.error('服务器接口异常')
					})
			},
			changeCommunity() {
				this.postList.courierStationCommunityId = this.value
			},
			editPost(row) {
				this.PostData = row;
				this.dialogFormVisible = true;
				this.title = '编辑驿站';
				this.address = [
					this.PostData.courierStationProvince, this.PostData.courierStationCity,
					this.PostData
					.courierStationDistrict
				];
				this.PostData.addOrUpdateFlag = 2
			},
			addpost() {
				this.queryCommunityList()
				this.dialogFormVisible = true,
					this.title = '添加驿站',
					this.PostData.addOrUpdateFlag = 1
			},
			cancle() {
				this.dialogFormVisible = false;
				this.address = [];
				this.PostData = {
					addOrUpdateFlag: 1,
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: "",
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: ""
				}
			},
			confirm() {
				let url = ""
				if (this.title == '编辑驿站') {
					url = "courierStation/modifyCourierStation"
				} else {
					url = 'courierStation/addCourierStation'
				}
				this.$http.post(
						url,
						this
						.PostData)
					.then((resp) => {
						if (resp.data.status == 200) {
							this.$message.success(resp.data.message)
							this.querypostList()
							this.cancle()
						} else {
							this.$message.error('操作失败!')
						}
					})
			},
			/* con(ss) {
				if (ss.courierStationStatus == 1) {
					this.$http.post(
							'courierStation/modifyCourierStation', {
								courierStationId: ss.courierStationId,
								courierStationStatus: 0
							})
						.then((resp) => {
							if (resp.data.status == 200) {
								this.$message.success(resp.data.message)
								this.querypostList()
								this.cancle()
							} else {
								this.$message.error('操作失败111!')
							}
						})

				} else {
					this.$http.post(
							'courierStation/modifyCourierStation', {
								courierStationId: ss.courierStationId,
								courierStationStatus: 1
							})
						.then((resp) => {
							//console.log(resp)
							if (resp.data.status == 200) {
								this.$message.success(resp.data.message)
								this.querypostList()
								this.cancle()
							} else {
								this.$message.error('操作失败!')
							}
						})
				}

			}, */
			con(ss) {
				this.$http.post(
						'courierStation/modifyCourierStation', {
							courierStationId: ss.courierStationId,
							courierStationStatus: (ss.courierStationStatus == 1) ? 0 : 1
						})
					.then((resp) => {
						if (resp.data.status == 200) {
							this.$message.success(resp.data.message)
							this.querypostList()
							this.cancle()
						} else {
							this.$message.error('操作失败111!')
						}
					})
			},

			onSubmit() {
				this.querypostList(),
					console.log(this.queryInfo.courierStationName)
			},
			handleSizeChange(val) {
				this.queryInfo.pageSize = val,
					this.querypostList()
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val,
					this.querypostList()
			},
			next(index) {
				this.queryInfo.pageNum = index,
					this.querypostList()
			},
			prev(index) {
				this.queryInfo.pageNum = index,
					this.querypostList()
			},
			querypostList() {
				this.$http.get('courierStation/querySearchCourierStationList', {
						params: this.queryInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.postList = res.data.data.list;
							this.total = res.data.data.total;
						} else {
							this.$message.error('服务器接口异常')
						}
					})
					.catch(err => {
						this.$message.error('服务器接口异常')
					})
			}
		},
		mounted() {
			this.querypostList()
			// this.queryCommunityList()
		},
		watch: {
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0];
					this.queryInfo.endTime = this.date[1];
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			address() {
				this.PostData.courierStationProvince = this.address[0];
				this.PostData.courierStationCity = this.address[1];
				this.PostData.courierStationDistrict = this.address[2];
			}
		}
	}
</script>

<style>
</style>